<template>
  <div class="check">
    <search-list :api-url="url.SaleAuditList" ref="search">
      <el-table-column
        prop="period"
        label="分佣周期"
        align="center"
        show-overflow-tooltip
      ></el-table-column>
      <el-table-column prop="payAmount" label="推广总交易额" align="center" show-overflow-tooltip>
        <template #default="scope">{{ scope.row.payAmount }}元</template>
      </el-table-column>
      <el-table-column prop="saleAmount" label="分佣总金额" align="center" show-overflow-tooltip>
        <template #default="scope">{{ scope.row.saleAmount }}元</template>
      </el-table-column>
      <el-table-column prop="checked" label="审核状态" align="center" show-overflow-tooltip>
        <template #default="scope">
          {{
            scope.row.checked !== null
              ? $selectFormat['checkStatusSl'](scope.row.checked).label
              : ''
          }}
        </template>
      </el-table-column>
      <el-table-column prop="delivered" label="分佣状态" align="center" show-overflow-tooltip>
        <template #default="scope">
          {{
            scope.row.delivered !== null
              ? $selectFormat['deliveredStatusSl'](scope.row.delivered).label
              : ''
          }}
        </template>
      </el-table-column>
      <el-table-column
        prop="checkedAt"
        label="最新审核时间"
        align="center"
        show-overflow-tooltip
      ></el-table-column>
      <el-table-column
        prop="deliverAt"
        label="分佣时间"
        align="center"
        show-overflow-tooltip
      ></el-table-column>
      <el-table-column
        prop="operator"
        label="最新审核操作人"
        align="center"
        show-overflow-tooltip
      ></el-table-column>
      <el-table-column label="操作" width="250px">
        <template #default="scope">
          <el-button type="primary" @click="downloadXlsx(scope.row)">下载明细表</el-button>
          <el-button
            type="primary"
            v-if="scope.row.checked === 1 && scope.row.delivered === 0"
            @click="check(scope.row)"
          >
            转为待审核
          </el-button>
          <el-button
            type="primary"
            v-if="scope.row.checked !== 1 || (scope.row.checked !== 1 && scope.row.delivered === 0)"
            @click="check(scope.row)"
          >
            进行审核
          </el-button>
        </template>
      </el-table-column>
    </search-list>
    <el-dialog width="30%" title="审核" v-model="showDialog" append-to-body>
      <span v-if="state.checkData.checked !== 1">
        审核通过意味着佣金将可以被分给推广员，请确认后进行状态修改
      </span>
      <span v-else>待审核状态下，该笔佣金将不会被分给推广员，确认要修改状态吗？</span>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="checkReset">取 消</el-button>
          <el-button type="primary" @click="checkSubmit" v-if="state.checkData.checked !== 1">
            审核通过
          </el-button>
          <el-button type="primary" @click="checkSubmit" v-else>转为待审核</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script setup>
  import {
    defineProps,
    getCurrentInstance,
    onMounted,
    reactive,
    ref,
    watch,
    computed,
    onBeforeMount,
  } from 'vue';
  import { ElMessage } from 'element-plus';

  const {
    $url: url,
    $http: http,
    $service: service,
    JSON_HEADER: JSON_HEADER,
    $selectFormat: selectFormat,
  } = getCurrentInstance().appContext.config.globalProperties;

  const showDialog = ref(false);

  const search = ref(null);

  const state = reactive({
    // 数据源
    checkData: [],
  });

  // methods
  // 下载明细表
  const downloadXlsx = (val) => {
    service
      .SaleAuditDownload(
        {
          period: val.period,
        },
        { responseType: 'blob' },
      )
      .then((res) => {
        console.log(res);
        var blob = new Blob([res], { type: 'application/vnd.ms-excel' });
        let url = window.URL.createObjectURL(blob);
        let el = document.createElement('a');
        document.body.appendChild(el);
        el.href = url;
        el.download = '分佣订单-' + val.period + '.xlsx';
        el.click();
        window.URL.revokeObjectURL(url);
      });
  };
  // 审核
  const check = (val) => {
    showDialog.value = true;
    state.checkData = val;
  };
  // 审核取消
  const checkReset = (val) => {
    showDialog.value = false;
  };
  // 审核
  const checkSubmit = (val) => {
    service
      .SaleAuditCheck({
        checked: Number(!state.checkData.checked),
        period: state.checkData.period,
        reason: '',
      })
      .then((res) => {
        ElMessage({ showClose: true, message: '修改成功！', type: 'success' });
        showDialog.value = false;
        // 刷新
        search.value.getList();
      });
  };
  // 生命周期
  onMounted(() => {});
</script>
<style lang="less" scoped>
  .check {
  }
</style>
